window.addEventListener('load', function() {
    //1. 倒计时
    downTime();

    function downTime() {
        var spans = document.querySelectorAll('.time span:nth-child(odd)');
        console.log(spans);
        //1. 指定目标时间 ，用目标时间减去当前时间 并换算成时分秒
        var target = new Date('2020-08-21 14:08:08');
        //2. 把时分秒显示在span标签中
        var timer = setInterval(function() {
            //获取当前时间
            var now = new Date();
            var t = (target - now) / 1000;
            // console.log(t);
            if (t <= 0) {
                //清空定时器
                clearInterval(timer);
                return;
            }
            // 把时间差值转成时分秒
            var h = parseInt(t / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(t / 60 % 24);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(t % 60);
            s = s < 10 ? '0' + s : s;
            //渲染
            spans[0].innerHTML = h;
            spans[1].innerHTML = m;
            spans[2].innerHTML = s;
        }, 1000);
    }
    //2. 头部滚动变色
    header();

    function header() {
        var head = document.querySelector('.jd-header');
        //1. 监听页面滚动事件, 在页面滚动后获取页面卷去的高度 用高度和指定高度做对比
        window.addEventListener('scroll', function() {
            //获取页面滚出去的高度
            var top = window.pageYOffset;
            // console.log(top);
            //指定一个目标值
            var target = 500;
            //获取比值
            var value = top / target;

            if (value > 0.8) {
                value = 0.8;
            }

            head.style.backgroundColor = 'rgba(222, 24, 27, ' + value + ')';
        });
    }
    //3. 快报无缝滚动
    news();

    function news() {
        var cut = document.querySelector('.jd-news .cut');
        var ul = cut.querySelector('ul');
        //1. 使用定时器切换列表 
        //2. 实现无缝滚动
        //记录当前显示的索引值
        var index = 0;
        //定时器
        setInterval(function() {
            index++;
            //添加过度
            setTansition(ul);
            //根据index值让ul进行移动
            var cutHeight = cut.offsetHeight;
            var move = -cutHeight * index;
            // console.log(cutHeight);
            setTanslateY(move);
        }, 1000);
        ul.addEventListener('transitionend', function() {
            check();
        });
        ul.addEventListener('webkitTransitionEnd', function() {
            check();
        });
        //添加过度
        function setTansition() {
            ul.style.webkitTransition = 'all 0.8s';
            ul.style.transition = 'all 0.8s';
        }

        //删除过度
        function removeTransition() {
            ul.style.webkitTransition = 'none';
            ul.style.transition = 'none';
        }

        //ul位移
        function setTanslateY(move) {
            ul.style.webkitTransform = 'translateY(' + move + 'px)';
            ul.style.transform = 'translateY(' + move + 'px)';
        }

        function check() {
            if (index >= ul.children.length - 1) {
                index = 0;
                removeTransition();
                setTanslateY(0);
            }
        }
    }

    //4. 轮播图 定时器切换轮播图 触屏滑动轮播图
    banner();

    function banner() {
        // 找对象
        var banner = document.querySelector('.jd-banner');
        var ul = banner.querySelector('ul');
        var circles = banner.querySelectorAll('ol li');
        //获取ul的宽度
        var width = banner.offsetWidth;

        //1. 定时器切换轮播图
        //定义index 记录当前切换的图片
        var index = 1; //默认显示第二张图片

        var timer = setInterval(function() {
            index++;
            //添加过渡
            setTransition();
            //计算ul移动的距离
            var move = -width * index;
            //ul移动
            setTanslateX(move);
        }, 1000);
        //在动画结束后 判断index是否越界
        ul.addEventListener('transitionend', function() {
            if (index >= ul.children.length - 1) {
                //让index值为1 进行重合
                index = 1;
                // //取消过渡效果
                // ul.style.transition = 'none';
                // //计算ul移动的距离
                // var move = -width * index;
                // ul.style.transform = 'translateX(' + move + 'px)';
            }

            if (index <= 0) {
                index = ul.children.length - 2;
                // //取消过渡效果
                // ul.style.transition = 'none';
                // //计算ul移动的距离
                // var move = -width * index;
                // ul.style.transform = 'translateX(' + move + 'px)';
            }

            //取消过渡效果
            removeTransition();
            //计算ul移动的距离
            var move = -width * index;
            setTanslateX(move);

            //上面判断之后 index为合理值
            circle(index - 1);
        });

        //切换小圆点方法
        function circle(i) {
            //排他思像
            circles.forEach(function(v, i) {
                v.classList.remove('current');
            });
            circles[i].classList.add('current');
        }

        //2. 触屏滑动轮播图
        //2.1 触屏开始
        //清除定时器
        //记录触屏起始位置
        //2.2 触屏移动
        //获取移动后的坐标位置
        //计算距离差值
        //ul跟随手指移动
        //2.3 触屏结束
        //判断滑动距离值是否大于图片宽度的三分之一
        //如果小于就不切换
        //如果大于三分之一就切换下一张（上一张）
        //判断左划或者右滑 让轮播图进行切换

        //数据重置
        //开启定时器

        //定义容器存储数据
        var startX = 0;
        var moveX = 0;
        var distanceX = 0;

        banner.addEventListener('touchstart', function(e) {
            clearInterval(timer); //清除定时器
            startX = e.targetTouches[0].pageX; //记录触屏的起始坐标
        });

        banner.addEventListener('touchmove', function(e) {
            //获取移动后的坐标位置
            moveX = e.targetTouches[0].pageX;
            //计算距离差值
            distanceX = moveX - startX;
            // console.log(distanceX);
            //ul跟随手指移动 在原有的基础上滑动
            var x = -index * width + distanceX;
            setTanslateX(x);
        });

        banner.addEventListener('touchend', function(e) {
            //判断滑动距离值是否大于图片宽度的三分之一
            if (Math.abs(distanceX) > width / 3) {
                //判断左划还是右滑
                if (distanceX > 0) {
                    //右滑
                    index--;
                } else if (distanceX < 0) {
                    //左划
                    index++;
                }
            }
            //根据index值的变化 让ul进行移动
            var x = -index * width;
            //添加过度
            setTransition();
            setTanslateX(x);

            //数据重置
            startX = 0;
            moveX = 0;
            distanceX = 0;
            //开启定时器
            timer = setInterval(function() {
                index++;
                //添加过渡
                setTransition();
                //计算ul移动的距离
                var move = -width * index;
                //ul移动
                setTanslateX(move);
            }, 1000);
        });

        //当屏幕宽度变化时，动态设置width的宽度
        window.onresize = function() {
            width = banner.offsetWidth;
            //立即以最新的屏幕宽调整位置
            //取消过渡效果
            removeTransition();
            //计算ul移动的距离
            var move = -width * index;
            setTanslateX(move);
        }

        //添加过渡
        function setTransition() {
            //ul添加过度过度
            ul.style.webkitTransition = 'all .8s';
            ul.style.transition = 'all .8s';
        }

        //删除过渡
        function removeTransition() {
            ul.style.webkitTransition = 'none';
            ul.style.transition = 'none';
        }

        //ul位移
        function setTanslateX(move) {
            ul.style.webkitTransform = 'translateX(' + move + 'px)';
            ul.style.transform = 'translateX(' + move + 'px)';
        }
    };

});